<div *ngIf="DPFXCategories" class="category">
    <ul>
        <li (click)="changeColumn('all')" [class.active]="this.changeAll">
            全部
        </li>
        <li *ngFor="let category of DPFXCategories" (click)="onClickCategory(category)" [class.active]="selectedCategory?.category_key===category.category_key">
            {{category.category_name}}
        </li>
    </ul>
</div>
<div *ngIf="articlesGroupOfAllCategory" class="news">
    <div class="news-list" (wheel)="loadMore($event)" #newList [class.closed]="leftActive">
        <!-- <div *ngIf="this.changeAll" class="banners">
            <div class="bannerContainer">
                <div class="bannerPicList">
                    <div class="bannerPic" *ngFor="let ad of ads;let i = index" [class.active]="currentPic==i">
                        <img [src]="ad.poster_url" (click)="clickAd(ad)" />
                    </div>
                </div>
                <div class="bannerBtnList">
                    <div *ngFor="let ad of ads;let i = index" class="bannerBtn">
                        <span class="picBtn" (click)="changebanner(i)" [class.active]="currentPic==i"></span>
                    </div>
                </div>
                <div class="bannerChangeList">
                    <div class="prev" (click)="changePrev()">
                        <img src="/static/images/index_next_img.png" />
                    </div>
                    <div class="next" (click)="changeNext()">
                        <img src="/static/images/index_next_img.png" />
                    </div>
                </div>
            </div>
        </div> -->
        <ul *ngIf="this.changeAll">
            <li *ngFor="let article of articlesGroupOfAllCategory" (click)="onClickArticle(article.group_articles[0],$event)" [class.active]="selectedArticle?.detail_id === article.group_articles[0].detail_id">
                <div class="left">
                    <!-- <div class="title">{{article.group_articles[0].title}}<img src="/static/images/chose_icon_lock.png" alt="lock" class="lock"></div> -->
                    <div class="title">{{article.group_articles[0].title}}</div>
                    <div class="part">{{article.group_articles[0].category_name}}</div>
                    <div class="time fr">{{article.group_articles[0].add_time}}</div>
                </div>
                <div class="right">
                    <div clsss="thumb">
                        <img class="thumb-img" [src]="article.group_articles[0].thumb_cdn_url" alt="">
                        <img class="start" src="/static/images/video_img_s.png" alt="">
                    </div>
                </div>
            </li>
        </ul>
        <ul *ngIf="!this.changeAll">
            <li *ngFor="let article of articlesGroupOfSelectedCategory[0].group_articles" (click)="onClickArticle(article,$event)" [class.active]="selectedArticle?.detail_id === article.detail_id">
                <div class="left">
                    <div class="title">{{article.title}}</div>
                    <div class="time">{{article.add_time}}</div>
                </div>
                <div class="right">
                    <div clsss="thumb">
                        <img class="thumb-img" [src]="article.thumb_cdn_url" alt="">
                        <img class="start" src="/static/images/video_img_s.png" alt="">
                    </div>
                </div>
            </li>
        </ul>
        <div #loadTracker></div>
    </div>
    <div class="news-content">
        <a href="javascript:;" class="left-toggle" (click)="toggleLeftState()" [class.active]="leftActive">
          <i class="iconfont icon-left"></i>
        </a>
        <iframe *ngIf="url" [src]="url===null?'':url" width="100%" height="100%" style="border: 0"></iframe>
        <a href="javascript:;" class="right-toggle" (click)="toggleRightState()"  [class.active]="rightActive">
          <i class="iconfont icon-right"></i>
        </a>
    </div>
    <div class="ad-list" [class.closed]="rightActive">
      <div class="title">热点推荐</div>
      <div class="ad" *ngFor="let ad of ads"><img [src]="ad.poster_url" (click)="clickAd(ad)"></div>
    </div>
</div>